<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒布局</title>
		<style>
			body {
				font: 24px helvetica;
				background-color: #FFFFFF;
			}

			.main {
				min-height: 500px;
				margin: 0px;
				padding: 0px;
				display: flex;
				/*设置该div为一个弹性盒容器*/
				flex-flow: row;
				/*子元素按横轴方向顺序排列*/
			}

			.mian div {
				margin: 4px;
				padding: 5px;
				border-radius: 7pt;
				/*pt也是文字大小的一种单位 1pt=px*3/4*/
			}

			.article {
				background:url(imges/05-dm02.jpg);
				background-size: 100%;
				flex: 3;
				/*用数字也可以达到分配宽度的效果 将容器分为5分 占3分*/
				order: 2;
				/*排序为第二个元素*/
			}

			.nav {
				background:url(./imges/timg.jpg);
				background-size: 110%;
				flex: 1;
				/*用数字也可以达到分配宽度的效果 将容器分为5分 占3分*/
				order: 1;
				/*排序为第二个元素*/
			}

			.aside {
				background:url(./imges/timg.jpg);
				background-size: 110%;
				flex: 1;
				/*用数字也可以达到分配宽度的效果 将容器分为5分 占3分*/
				order: 3;
				/*排序为第二个元素*/
			}

			.header,
			.footer {
				display: block;
				margin: 4px;
				padding: 2px;
				min-height: 100px;
				border: 2px solid #FFBA41;
				border-radius: 7pt;
				background-color: #FFF;
			}
			.header{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 50px;
			}
			.footer{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			@media all and (max-width:640px) {

				/*当屏幕宽度小于640px时*/
				.main {
					flex-flow: column;
					/*弹性盒中的子元素按纵轴方向排列*/
				}

				.article,
				.nav,
				.aside {
					order: 0;
					/*将子元素都设置成同一个值，指按自然顺序排列*/
				}

				.nav,
				.aside,
				.header,
				.footer {
					min-height: 50px;
					max-height: 50px;
				}

			}
		</style>
	</head>
	<body>
		<div class="header">弹性盒布局</div>
		<div class="main">
			<div class="article"></div>
			<div class="nav"></div>
			<div class="aside"></div>
		</div>
		<div class="footer">
			order	设置弹性盒子的子元素排列顺序。<br />
			flex	设置弹性盒子的子元素如何分配空间。<br />
		</div>
	</body>
</html>
